<div class="row flex-wrap row-gap-3" tourAnchor="tour.documents-filter-editor">
  <div class="col">
    <div class="form-inline d-flex align-items-center">
      <div class="input-group input-group-sm flex-fill w-auto flex-nowrap">
        <div ngbDropdown>
          <button class="btn btn-sm btn-outline-primary" ngbDropdownToggle>{{textFilterTargetName}}</button>
          <div class="dropdown-menu shadow" ngbDropdownMenu>
            @for (t of textFilterTargets; track t) {
              <button ngbDropdownItem [class.active]="textFilterTarget === t.id" (click)="changeTextFilterTarget(t.id)">{{t.name}}</button>
            }
          </div>
        </div>
        @if (textFilterTarget === 'asn') {
          <select class="form-select flex-grow-0 w-auto" [(ngModel)]="textFilterModifier" (change)="textFilterModifierChange()">
            @for (m of textFilterModifiers; track m) {
              <option ngbDropdownItem [value]="m.id">{{m.label}}</option>
            }
          </select>
        }
        @if (_textFilter) {
          <button class="btn btn-link btn-sm px-0 position-absolute top-0 end-0 z-10" (click)="resetTextField()">
            <svg fill="currentColor" class="buttonicon-sm me-1">
              <use xlink:href="assets/bootstrap-icons.svg#x"/>
            </svg>
          </button>
        }
        <input #textFilterInput class="form-control form-control-sm" type="text" [disabled]="textFilterModifierIsNull" [(ngModel)]="textFilter" (keyup)="textFilterKeyup($event)" [readonly]="textFilterTarget === 'fulltext-morelike'">
      </div>
    </div>
  </div>
  <div class="col-auto">
    <div class="d-flex flex-wrap gap-3">
      <div class="d-flex flex-wrap gap-2">
        <pngx-filterable-dropdown class="flex-fill" title="Tags" icon="tag-fill" i18n-title
          filterPlaceholder="Filter tags" i18n-filterPlaceholder
          [items]="tags"
          [manyToOne]="true"
          [(selectionModel)]="tagSelectionModel"
          (selectionModelChange)="updateRules()"
          (opened)="onTagsDropdownOpen()"
          [documentCounts]="tagDocumentCounts"
        [allowSelectNone]="true"></pngx-filterable-dropdown>
        <pngx-filterable-dropdown class="flex-fill" title="Correspondent" icon="person-fill" i18n-title
          filterPlaceholder="Filter correspondents" i18n-filterPlaceholder
          [items]="correspondents"
          [(selectionModel)]="correspondentSelectionModel"
          (selectionModelChange)="updateRules()"
          (opened)="onCorrespondentDropdownOpen()"
          [documentCounts]="correspondentDocumentCounts"
        [allowSelectNone]="true"></pngx-filterable-dropdown>
        <pngx-filterable-dropdown class="flex-fill" title="Document type" icon="file-earmark-fill" i18n-title
          filterPlaceholder="Filter document types" i18n-filterPlaceholder
          [items]="documentTypes"
          [(selectionModel)]="documentTypeSelectionModel"
          (selectionModelChange)="updateRules()"
          (opened)="onDocumentTypeDropdownOpen()"
          [documentCounts]="documentTypeDocumentCounts"
        [allowSelectNone]="true"></pngx-filterable-dropdown>
        <pngx-filterable-dropdown class="flex-fill" title="Storage path" icon="folder-fill" i18n-title
          filterPlaceholder="Filter storage paths" i18n-filterPlaceholder
          [items]="storagePaths"
          [(selectionModel)]="storagePathSelectionModel"
          (selectionModelChange)="updateRules()"
          (opened)="onStoragePathDropdownOpen()"
          [documentCounts]="storagePathDocumentCounts"
        [allowSelectNone]="true"></pngx-filterable-dropdown>
      </div>
      <div class="d-flex flex-wrap gap-2">
        <pngx-date-dropdown
          title="Created" i18n-title
          (datesSet)="updateRules()"
          [(dateBefore)]="dateCreatedBefore"
          [(dateAfter)]="dateCreatedAfter"
        [(relativeDate)]="dateCreatedRelativeDate"></pngx-date-dropdown>
        <pngx-date-dropdown
          title="Added" i18n-title
          (datesSet)="updateRules()"
          [(dateBefore)]="dateAddedBefore"
          [(dateAfter)]="dateAddedAfter"
        [(relativeDate)]="dateAddedRelativeDate"></pngx-date-dropdown>
      </div>
      <div class="d-flex flex-wrap">
        <pngx-permissions-filter-dropdown
          title="Permissions" i18n-title
          (ownerFilterSet)="updateRules()"
        [(selectionModel)]="permissionsSelectionModel"></pngx-permissions-filter-dropdown>
      </div>
      <div class="d-flex flex-wrap d-none d-sm-inline-block">
        <button class="btn btn-outline-secondary btn-sm" [disabled]="!rulesModified" (click)="resetSelected()">
          <svg class="toolbaricon ms-n1" fill="currentColor">
            <use xlink:href="assets/bootstrap-icons.svg#x"></use>
            </svg><ng-container i18n>Reset filters</ng-container>
          </button>
        </div>
      </div>
    </div>
  </div>
